<template>
  <div class="user">
    <!-- 检索输入部分 -->
    <div class="serachBox">
      <div class="searchItem">
        <div class="label">姓名:</div>
        <div class="inputBox">
          <el-input size="small"
                    placeholder="请输入用户名称"
                    v-model.trim="searchForm.name"
                    clearable>
          </el-input>
        </div>
      </div>
      <div class="searchItem">
        <div class="label">手机号:</div>
        <div class="inputBox">
          <el-input size="small"
                    placeholder="请输入手机号码"
                    v-model.trim="searchForm.phone"
                    clearable>
          </el-input>
        </div>
      </div>
      <div class="searchItem last">
        <div class="label">状态:</div>
        <div class="inputBox">
          <el-select size="small"
                     :popper-append-to-body="false"
                     v-model="searchForm.state"
                     placeholder="用户状态">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <el-button size="small"
                   type="primary"
                   @click="search"
                   icon="el-icon-search">搜索</el-button>
        <el-button size="small"
                   @click="reset"
                   icon="el-icon-refresh">重置</el-button>
      </div>
    </div>

    <!-- 按钮部分 -->
    <div class="btnBox">
      <!-- 左侧按钮 -->
      <div class="leftBtn">
        <!-- 新增 -->
        <el-button size="mini"
                   type="success"
                   icon="el-icon-plus"
                   plain
                   @click="add">新增</el-button>
        <!-- 导入 -->
        <el-button @click="uploadFile"
                   size="mini"
                   type="info"
                   icon="el-icon-upload2"
                   plain>导入</el-button>
        <!-- 导出 -->
        <el-button size="mini"
                   type="warning"
                   icon="el-icon-download"
                   plain>导出</el-button>
      </div>

      <!-- 右侧按钮 -->
      <div class="rightBtn">
        <span>
          <el-popover width="60"
                      trigger="click">
            <el-checkbox-group v-model="columnSelecteds">
              <el-checkbox :disabled="item.changeble"
                           v-for="item in columnHeaders"
                           :label="item.title"
                           :key="item.title"></el-checkbox>
            </el-checkbox-group>
            <span slot="reference"><i class="el-icon-setting"></i> 定制列</span>
          </el-popover>
        </span>
        <span>|</span>
        <span><i class="el-icon-download"></i>下载</span>
        <span>|</span>
        <span><i class="el-icon-share"></i>关联</span>
        <span>|</span>
        <span><i class="el-icon-menu"></i>版本</span>
      </div>
    </div>

    <!-- 表格:表格的简约高效写法，但是这种情况下暂时没有想到实现定制列的方法，后续想到再更新吧 -->
    <!-- <div class="tableBox">
      <el-table :data="tableData"
                v-loading="loading"
                ref="dataTable"
                size="small"
                border
                height="100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column v-for="column in columnList"
                         :key="column.prop"
                         v-bind="column">
        </el-table-column>
        <el-table-column label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)"
                       icon="el-icon-edit"
                       size="small"
                       class="warning"
                       type="text">编辑</el-button>
            <el-button @click="download(scope.row)"
                       icon="el-icon-download"
                       size="small"
                       class="normal"
                       type="text">下载</el-button>
            <el-button @click="del(scope.row)"
                       size="small"
                       icon="el-icon-delete"
                       class="danger"
                       type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> -->

    <!-- 表格:表格的普通写法，虽然比较繁琐，但是目前只想到这种情况下实现定制列的方法-->
    <div class="tableBox">
      <el-table :data="tableData"
                v-loading="loading"
                ref="dataTable"
                size="mini"
                border
                height="100%">
        <el-table-column v-if="columnHeaders[0].isShow"
                         width="80"
                         prop="name"
                         label="姓名">
        </el-table-column>
        <el-table-column v-if="columnHeaders[1].isShow"
                         width="80"
                         prop="age"
                         label="年龄">
        </el-table-column>
        <el-table-column v-if="columnHeaders[2].isShow"
                         prop="id"
                         label="证件号码">
        </el-table-column>
        <el-table-column v-if="columnHeaders[3].isShow"
                         width="120"
                         prop="phone"
                         label="电话">
        </el-table-column>
        <el-table-column v-if="columnHeaders[4].isShow"
                         show-overflow-tooltip
                         prop="email"
                         label="邮箱">
        </el-table-column>
        <el-table-column v-if="columnHeaders[5].isShow"
                         show-overflow-tooltip
                         prop="address"
                         label="地址">
        </el-table-column>
        <el-table-column label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)"
                       icon="el-icon-edit"
                       size="small"
                       class="info"
                       type="text">详情</el-button>
            <el-button @click="edit(scope.$index,scope.row)"
                       icon="el-icon-edit"
                       size="small"
                       class="warning"
                       type="text">编辑</el-button>
            <el-button @click="del(scope.$index,scope.row)"
                       size="small"
                       icon="el-icon-delete"
                       class="danger"
                       type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 页码 -->
    <div class="pageBox">
      <el-pagination background
                     @current-change="handlePageChange"
                     layout="prev, pager, next"
                     :total="1000">
      </el-pagination>
    </div>

    <!-- 编辑信息弹框 -->
    <edit-dialog :formData="curRow"
                 :visiable="editDialogVisible"></edit-dialog>

    <!-- 新增信息弹框 -->
    <add-dialog v-if="addDialogVisible"
                :visiable="addDialogVisible"
                @sendSuccess="sendSuccess"
                @func="getMsgFromAdd"></add-dialog>

    <!-- 文档上传弹框 -->
    <upload-dialog v-if="uploadDialogVisible"
                   @func="getMsgFromUpload"
                   :visiable="uploadDialogVisible"></upload-dialog>
  </div>
</template>

<script>
import AddDialog from "./addDialog.vue"
import EditDialog from "./editDialog.vue"
import uploadDialog from "./uploadDialog.vue"
export default {
  name: 'user',
  components: { AddDialog, EditDialog, uploadDialog },
  data () {
    return {
      loading: false,
      form: {},
      options: [{ value: 0, label: '停用' }, { value: 1, label: '正常' }],
      searchForm: { name: '', phone: '', state: 1 },
      curRow: {},
      currentPage: 1,
      //用于简约渲染表格
      columnList: [
        {
          label: "姓名",
          prop: "name",
          width: 80,
          show: false
        }, {
          label: "年龄",
          prop: "age",
          width: 60
        }, {
          label: "证件号码",
          prop: "id"
        }, {
          label: "电话",
          prop: "phone",
          width: 120
        }, {
          label: "邮箱",
          prop: "email"
        }, {
          label: "地址",
          prop: "address"
        }
      ],
      tableData: [{
        name: "张三",
        age: 25,
        height: 178,
        weight: 70,
        id: "130726199308160425",
        phone: "12345678901",
        email: "15933331934",
        address: "河北省唐山市迁西东大街"
      }],
      //定制列功能中用到的表头信息
      columnHeaders: [
        { index: 0, title: "姓名", isShow: true, changeble: true },
        { index: 1, title: "年龄", isShow: true, changeble: false },
        { index: 2, title: "证件号码", isShow: true, changeble: true },
        { index: 3, title: "电话", isShow: true, changeble: false },
        { index: 4, title: "邮箱", isShow: true, changeble: false },
        { index: 5, title: "地址", isShow: true, changeble: false },
      ],
      //定制列功能默认已选择的项
      columnSelecteds: ["姓名", "年龄", "证件号码", "电话", "邮箱", "地址"],
      multipleSelection: [],
      addDialogVisible: false,
      editDialogVisible: false,
      uploadDialogVisible: false,
      tableData: []
    };
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      this.loading = true
      const params = {
        data: this.searchForm
      }
      this.$api.user.getUserList(params).then(res => {
        if (res.status === '1') {
          this.loading = false
          this.tableData = res.data.list
        }
      })
    },
    reset () {
      this.searchForm.name = ''
      this.searchForm.phone = ''
      this.searchForm.state = 1
      this.search()
    },
    add () {
      this.addDialogVisible = true
    },
    sendSuccess (val) {
      if (val) {
        this.search()
      }
    },
    handlePageChange (currentPage) {
      console.log('当前是第' + currentPage + '页')
      this.search()
    },
    download () {
      alert("下载")
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    getMsgFromAdd (val) {
      this.addDialogVisible = val;
    },
    getMsgFromUpload (val) {
      this.uploadDialogVisible = val;
    },
    detail (row) {
      this.$router.push({ path: '/userDetail' })
    },
    edit (index, row) {
      console.log('编辑')
      console.log(index + "===" + row)
    },
    del (index, row) {
      console.log('删除')
      console.log(index + "===" + row)
    },
    // 文档上传
    uploadFile () {
      this.uploadDialogVisible = true
    },
  },
  watch: {
    /**
     * @title 监听列显示隐藏
     */
    columnSelecteds (newArrayVal) {
      // 计算为被选中的列标题数组
      var nonSelecteds = this.columnHeaders
        .filter(item => newArrayVal.indexOf(item.title) == -1)
        .map(item => item.title)
      // 根据计算结果进行表格重绘
      this.columnHeaders.filter(item => {
        let isNonSelected = nonSelecteds.indexOf(item.title) != -1
        if (isNonSelected) {
          // 隐藏未选中的列
          item.isShow = false
          this.$nextTick(() => {
            this.$refs.dataTable.doLayout()
          })
        } else {
          // 显示已选中的列
          item.isShow = true
          this.$nextTick(() => {
            this.$refs.dataTable.doLayout()
          })
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.normal {
  color: #409eff;
}
.info {
  color: #909399;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.danger {
  color: #f56c6c;
}

.user {
  padding: 10px;
  box-sizing: border-box;
  height: 100% !important;
  .serachBox {
    display: flex;
    height: 50px;
    line-height: 50px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    .searchItem {
      display: flex;
      // margin-right: 10px;
      width: 260px;

      .label {
        height: 100%;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
      }

      .inputBox {
        padding-left: 10px;

        /*解决el-select下拉框最后一个显示不完全的bug(同时标签中添加:popper-append-to-body="false")*/
        /deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
          margin-bottom: 0 !important;
        }
      }
    }

    .searchItem:nth-of-type(2) {
      margin-right: 10px;
    }

    .last {
      margin-right: 0;
    }
  }
  .btnBox {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    .leftBtn {
      float: left;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
      color: #5e6d82;
    }
    .rightBtn {
      float: right;
      display: flex;
      justify-content: flex-end;
      span {
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
      }
      span:nth-of-type(odd) {
        color: #409eff;
      }
      span:nth-of-type(even) {
        color: #989da1cb;
        padding-left: 7px;
        padding-right: 7px;
      }
    }
  }
  .tableBox {
    height: calc(~"100% - 130px");
    .el-table {
      .el-button {
        padding: 0;
      }
    }
  }
  .pageBox {
    margin-top: 10px;
    height: 30px;
    .el-pagination {
      padding: 2px 0 !important;
    }
  }
}
</style>